<template>
  <div class="chat-send">
    <div
      class="send-data"
      :style="{
        border: dataObj.textareaFocus
          ? `1px solid ${appConfigValue.primaryColor}`
          : '1px solid #fff',
      }"
    >
      <div class="data-area">
        <a-textarea
          placeholder="请输入问题，Enter发送，Shift+Enter换行"
          v-model:value="dataObj.textValue"
          :autoSize="{ minRows: 4, maxRows: 8 }"
          :bordered="false"
          ref="textareaRef"
          @keydown="handleKeyCode($event)"
          @focus="dataObj.textareaFocus = true"
          @blur="dataObj.textareaFocus = false"
          :maxlength="2000"
        />
      </div>
      <div class="data-btn">
        <div class="btn-send" v-if="!sendLoading" @click="sendMessage">
          发送
          <!-- <IconFont iconType="icon-fasong_icon" customClass="send-icon" /> -->
        </div>
        <div class="btn-send" v-else @click="stopBack">
          停止
          <caret-right-outlined class="send-stop" />
        </div>
      </div>
    </div>
    <!-- <div class="send-txt">内容由AI大模型生成，请仔细审核</div> -->
  </div>
</template>

<script setup name="ChatSend">
import { DownOutlined, CaretRightOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
// import { userStore } from "@/store/modules/user";
// import IconFont from '@/components/IconFont/index.vue'

import { useChatData } from "../hooks/useChatData";

import uploadImg from "@/assets/images/chat/upload.png";
import bpModel from "@/assets/images/chat/bpModel.png";
import zpModel2 from "@/assets/images/chat/zpModel2.png";
import gptModel2 from "@/assets/images/chat/gptModel2.png";
import gemModel2 from "@/assets/images/chat/gemModel2.png";
import { useAppStore } from "@/store/modules/app.js";

const emit = defineEmits(["sendMessage", "stopBack"]);
const appStore = useAppStore();

const { sendLoading } = useChatData();
// const userModule = userStore();

const textareaRef = ref(null);
const dataObj = reactive({
  selectMode: 0,
  modeList: [
    {
      label: "BPai-3.5",
      value: 0,
      icon: bpModel,
    },
    {
      label: "GLM-4",
      value: 1,
      icon: zpModel2,
    },
    {
      label: "GPT-4 Turbo（限海外）",
      value: 2,
      icon: gptModel2,
    },
    {
      label: "Gemini Pro（限海外）",
      value: 3,
      icon: gemModel2,
    },
  ],
  textareaFocus: false,
  textValue: "",
});

// const sourceTagValue = computed(() => userModule.sourceTag === "1");

const appConfigValue = computed(() => appStore.appConfigValue);

// 选择模型
const handleCommand = ({ key }) => {
  dataObj.selectMode = key;
};
// 清除数据
const clearMsgContent = () => {
  dataObj.textValue = "";
};
// 发送消息
const sendMessage = () => {
  if (sendLoading.value) {
    return;
  }
  if (!dataObj.textValue.trim()) {
    message.warning("请输入问题");
    return;
  }
  let textValue = dataObj.textValue.trim();
  let sendMsg = {
    direction: "Q",
    contextMsg: textValue,
    chatType: "chat",
    modelOptions: "demo",
    terminalType: "web",
    historyDialogue: [],

    // model: dataObj.selectMode == 1 ? 'ZHIPU_API' : 'Premium_Version'
  };
  clearMsgContent();
  emit("sendMessage", sendMsg);
};
// 停止消息
const stopBack = () => {
  emit("stopBack");
};
const handleKeyCode = (event) => {
  if (event.keyCode == 13) {
    if (!event.shiftKey) {
      event.preventDefault();
      if (!sendLoading.value) {
        sendMessage();
      } else {
        stopBack();
      }
    }
  }
};

const textareaFocus = () => {
  if (textareaRef.value) {
    textareaRef.value.focus();
  }
};
defineExpose({
  textareaFocus,
});
</script>

<style lang="scss" scoped>
// @primary-gradient-color: v-bind("appConfigValue.gradientColor");

$primary-gradient-color: linear-gradient(135deg, #5594ff 0%, #002cff 100%);
.chat-send {
  flex-shrink: 0;
  width: 100%;
  min-width: 600px;
  max-width: 964px;
  margin-top: 16px;
  padding: 0 84px 0 78px;
  .send-operate {
    height: 48px;
    display: flex;
    // align-items: center;
    .operate-mode {
      margin-top: 8px;
      .mode-item {
        border-radius: 8px;
        background: #ffffff;
        padding: 8px;
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          width: 16px;
          height: 16px;
        }
        .item-txt {
          font-size: 12px;
          font-weight: 700;
          color: #192236;
          margin-left: 4px;
          margin-right: 4px;
        }
        .item-icon {
          color: #565c6e;
          font-size: 14px;
          font-weight: 600;
        }
      }
    }
    .operate-img {
      width: auto;
      height: 36px;
      margin-left: 16px;
      margin-top: 12px;
    }
  }
  .send-data {
    background-color: #fff;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: flex-end;
    :deep(.data-area) {
      flex: 1;
      textarea.ant-input {
        padding: 0;
      }
    }
    .data-btn {
      width: 88px;
      height: 40px;
      flex-shrink: 0;
      margin-left: 8px;
      .btn-send {
        height: 100%;
        background: $primary-gradient-color;
        border-radius: 20px;
        font-weight: 600;
        line-height: 24px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        .send-icon {
          color: #fff;
          font-size: 14px;
          margin-left: 5px;
        }
        .send-stop {
          color: #fff;
          font-size: 20px;
          margin-left: 0;
        }
      }
    }
  }
  .send-txt {
    color: #c0c0c0;
    text-align: center;
    font-size: 12px;
    margin-top: 8px;
  }
}
</style>
